<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>demo</title>
		<link rel="stylesheet" href="css/debug.css">
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="css/list-menu.css">
		<link rel="stylesheet" href="css/section.css">
		<link rel="stylesheet" href="css/toolbar.css"/>
		<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$(".oc-menu > li").click(function(event){
					event.stopPropagation();
					$(".oc-menu > li.active").removeClass("active");
					$(this).addClass("active");
				});
				$("body").click(function(){
					$(".oc-menu > li.active").removeClass("active");
				});
			});
		</script>
	</head>
	<body>
<!--最大化的窗口样式-->
		<div class="oc-dialog oc-dialog-max">
			<header>
				<i></i>
				<label>{{title}}</label>
			</header>
			<nav>
				<button>-</button>
				<button>+</button>
				<button class="danger">&times;</button>
			</nav>
			<main>
				<menu class="oc-menu">
					<li>文件(F)
						<ul>
							<li><button>DSpellCheck</button></li>
							<li><button>Explorer</button></li>
							<li><button>MIME Tools</button></li>
							<li><button>Converter</button></li>
							<li><button>NppFTP</button></li>
							<hr/>
							<li class="sub" disabled><button>Plugin Manager</button>
								<ul>
									<li><button>DSpellCheck</button></li>
									<li><button>Explorer</button></li>
									<li><button>MIME Tools</button></li>
									<li><button>Converter</button></li>
									<li><button>NppFTP</button></li>
									<li><button>Plugin Manager</button></li>
								</ul>
							</li>
						</ul>
					</li>
					<li class="active">编辑(E)
						<ul>
							<li><button>DSpellCheck</button></li>
							<li><button>Explorer</button></li>
							<li><button>MIME Tools</button></li>
							<li><button>Converter</button></li>
							<hr/>
							<li class="sub" disabled><button>NppFTP</button>
								<ul>
									<li><button>DSpellCheck</button></li>
									<li><button>Explorer</button></li>
									<li><button>MIME Tools</button></li>
									<li><button>Converter</button></li>
									<li><button>NppFTP</button></li>
									<li><button>Plugin Manager</button></li>
								</ul>
							</li>
							<hr/>
							<li class="sub">Plugin Manager
								<ul>
									<li><button>DSpellCheck</button></li>
									<li><button>Explorer</button></li>
									<li><button>MIME Tools</button></li>
									<li><button>Converter</button></li>
									<li><button>NppFTP</button></li>
									<li><button>Plugin Manager</button></li>
								</ul>
							</li>
						</ul>
					</li>
					<li>查看(V)
						<ul>
							<li><button>文字</button></li>
							<hr/>
							<li><button>文字</button></li>
							<li><button>MIME Tools</button></li>
							<li><button>Converter</button></li>
							<hr/>
							<li class="sub" disabled><button>NppFTP</button>
								<ul>
									<li><button>DSpellCheck</button></li>
									<li><button>Explorer</button></li>
									<li><button>MIME Tools</button></li>
									<li><button>Converter</button></li>
									<li><button>NppFTP</button></li>
									<li><button>Plugin Manager</button></li>
								</ul>
							</li>
							<hr/>
							<li class="sub">Plugin Manager
								<ul>
									<li><button>DSpellCheck</button></li>
									<li><button>Explorer</button></li>
									<li><button>MIME Tools</button></li>
									<li><button>Converter</button></li>
									<li><button>NppFTP</button></li>
									<li><button>Plugin Manager</button></li>
								</ul>
							</li>
						</ul>
					</li>
					<li>历史(S)</li>
					<li>书签(B)</li>
					<li>工具(T)</li>
					<li>帮助(H)</li>
				</menu>
				<nav class="oc-toolbar">
					<ul class="icon-list">
						<li><i></i></li>
						<li><i></i></li>
						<li class="divider"><i></i></li>
						<li><i></i></li>
						<li><i></i></li>
						<li><i></i></li>
						<li><i></i></li>
						<li><i></i></li>
						<li><i></i></li>
						<li class="divider"><i></i></li>
						<li><i></i></li>
						<li><i></i></li>
						<li><i></i></li>
						<li><i></i></li>
						<li><i></i></li>
					</ul>
				</nav>
				<div>
					<section>
						section元件区
							<!--一般默认大小的窗口样式-->
		<div class="oc-dialog" style="
			left: 10rem;
			top: 10rem;
		" >
			<header>
				<i></i>
				<label>{{title}}</label>
			</header>
			<nav>
				<button>-</button>
				<button>+</button>
				<button class="danger">&times;</button>
			</nav>
			<main>
				<menu class="oc-menu">
					<li>文件(F)
						<ul>
							<li><button>DSpellCheck</button></li>
							<li><button>Explorer</button></li>
							<li><button>MIME Tools</button></li>
							<li><button>Converter</button></li>
							<li><button>NppFTP</button></li>
							<hr />
							<li class="sub" disabled><button>Plugin Manager</button>
								<ul>
									<li><button>DSpellCheck</button></li>
									<li><button>Explorer</button></li>
									<li><button>MIME Tools</button></li>
									<li><button>Converter</button></li>
									<li><button>NppFTP</button></li>
									<li><button>Plugin Manager</button></li>
								</ul>
							</li>
						</ul>
					</li>
					<li class="active">编辑(E)
						<ul>
							<li><button>DSpellCheck</button></li>
							<li><button>Explorer</button></li>
							<li><button>MIME Tools</button></li>
							<li><button>Converter</button></li>
							<hr/>
							<li class="sub" disabled><button>NppFTP</button>
								<ul>
									<li><button>DSpellCheck</button></li>
									<li><button>Explorer</button></li>
									<li><button>MIME Tools</button></li>
									<li><button>Converter</button></li>
									<li><button>NppFTP</button></li>
									<li><button>Plugin Manager</button></li>
								</ul>
							</li>
							<hr/>
							<li class="sub">Plugin Manager
								<ul>
									<li><button>DSpellCheck</button></li>
									<li><button>Explorer</button></li>
									<li><button>MIME Tools</button></li>
									<li><button>Converter</button></li>
									<li><button>NppFTP</button></li>
									<li><button>Plugin Manager</button></li>
								</ul>
							</li>
						</ul>
					</li>
					<li>查看(V)
						<ul>
							<li><button>文字</button></li>
							<hr/>
							<li><button>文字</button></li>
							<li><button>MIME Tools</button></li>
							<li><button>Converter</button></li>
							<hr/>
							<li class="sub" disabled><button>NppFTP</button>
								<ul>
									<li><button>DSpellCheck</button></li>
									<li><button>Explorer</button></li>
									<li><button>MIME Tools</button></li>
									<li><button>Converter</button></li>
									<li><button>NppFTP</button></li>
									<li><button>Plugin Manager</button></li>
								</ul>
							</li>
							<hr/>
							<li class="sub">Plugin Manager
								<ul>
									<li><button>DSpellCheck</button></li>
									<li><button>Explorer</button></li>
									<li><button>MIME Tools</button></li>
									<li><button>Converter</button></li>
									<li><button>NppFTP</button></li>
									<li><button>Plugin Manager</button></li>
								</ul>
							</li>
						</ul>
					</li>
					<li>历史(S)</li>
					<li>书签(B)</li>
					<li>工具(T)</li>
					<li>帮助(H)</li>
				</menu>
				<nav class="oc-toolbar">
					<ul class="icon-list">
						<li><i></i></li>
						<li><i></i></li>
						<li class="divider"><i></i></li>
						<li><i></i></li>
						<li><i></i></li>
						<li><i></i></li>
						<li><i></i></li>
						<li><i></i></li>
						<li><i></i></li>
						<li class="divider"><i></i></li>
						<li><i></i></li>
						<li><i></i></li>
						<li><i></i></li>
						<li><i></i></li>
						<li><i></i></li>
					</ul>
				</nav>
				<div>	
					<div class="sidebar-left">
						左边栏
					</div>
					<section>
						section元件区
					</section>
					<div class="sidebar-right">
						右边栏
					</div>
				</div>
				<footer style="background-color:#d2d2d2; font-size:0.6rem">状态栏区域</footer>
			</main>
		</div>
					</section>
				</div>
				<footer style="background-color:#d2d2d2; font-size:0.6rem">状态栏区域</footer>
			</main>
		</div>
			
	</body>
</html>